<template>
	<view class="container">
		<view class="code-title text_black">请输入验证码</view>
		<view class="code-tips text_black">短信验证码已发送至+86 {{number}}</view>
		<view class="code-input">
			<!-- <verificationCode
			:unit="4" 
			:focus="true"
			:ontime="true" 
			@change="handle"
			></verificationCode> -->
			<vcodeInput ref="VcodeInput"
			:sum="4" :isBorderLine="true"
			:autofocus="false"
			@vcodeInput="vcodeInput"></vcodeInput>
		</view>
		
		<view class="code-num text_opblack" v-if="codeNum>0">（{{codeNum}}s）后点击重新发送验证码</view>
		<view class="code-num text_return" v-else @click="timeChange">重发验证码</view>
	</view>
</template>

<script>
	import Cache from "../../static/js/cache.js";
	import verificationCode from "../../components/verification-code/verification-code.vue"
	import vcodeInput from "../../components/vcode-input/vcode-input.vue";
	import {login,sendCode} from "../../static/js/api/user.js";
	export default {
		components:{
			verificationCode,
			vcodeInput
		},
		data() {
			return {
				phone:'',
				number:"",
				codeNum:60,
			}
		},
		onLoad(option) {
			console.log(option)
			if(option.phone){
				this.phone = option.phone
				this.number = option.phone.substr(0,3) + '****' + option.phone.substr(7); 
				this.timeChange()
			}
			
		},
		methods: {
			vcodeInput(val){
				console.log(val)
				let _this = this
				let system = uni.getSystemInfoSync(); 
				let device = null
				if(system.platform === 'android'){
					device = 1
				}else if(system.platform === 'ios'){
					device = 2
				}
				login({
					mobile:_this.phone,
					code:val,
					device:device,
				}).then(res=>{
					if(res.token){
						Cache.cache.set('token',res.token)
						this.$refs.VcodeInput.clearValue();
						uni.reLaunch({
							url:"/pages/home/index"
						})
					}else{
						this.$refs.VcodeInput.clearValue();
					}
				}).catch(err=>{
					this.$refs.VcodeInput.clearValue();
				})
			},
			timeChange(){
				let _this = this
				_this.codeNum = 60;
				sendCode({
					mobile:_this.phone
				}).then(res=>{
					console.log(res)
					uni.showToast({
						title:"验证码已发送",
						icon:'none'
					})
				})
				let interval = setInterval(() => {
					if (_this.codeNum > 0){
						_this.codeNum -= 1;
					}else {
						clearInterval(interval)
					}
				},1100);
			},
			handle(code){
				let _this = this
				// if(code.length==4){
				// 	console.log(code)//code就是验证码
				// 	login({
				// 		mobile:_this.phone,
				// 		code:code
				// 	}).then(res=>{
				// 		if(res.token){
				// 			Cache.cache.set('token',res.token)
				// 			uni.reLaunch({
				// 				url:"/pages/home/index"
				// 			})
				// 		}
				// 	})
				// }
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url("./index.scss");
	.text_black{
		color: $uni-text-color-black;
	}
	.text_opblack{
		color: $uni-text-color-opblack;
	}
	.text_return{
		color:#FF6E00;
		font-weight: bold;
	}
</style>